<template>
  <div class="classify">
    <van-nav-bar
      :title="list[active].name"
      left-arrow
      class="topNav"
      @click-left="leftJump"
      @click-right="rightJump"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="content">
      <van-sidebar v-model="active" @change="onNavchange">
        <van-sidebar-item :title="list[0].name" />
        <van-sidebar-item :title="list[1].name" />
        <van-sidebar-item :title="list[2].name" />
        <van-sidebar-item :title="list[3].name" />
        <van-sidebar-item :title="list[4].name" />
        <van-sidebar-item :title="list[5].name" />
        <van-sidebar-item :title="list[6].name" />
        <van-sidebar-item :title="list[7].name" />
        <van-sidebar-item :title="list[8].name" />
        <van-sidebar-item :title="list[9].name" />
      </van-sidebar>
      <div class="goodslist">
        <ul>
          <lazy-component>
          <li
            v-for="(item, index) in showList"
            :key="index"
            @click="jumpToGoods(item.id)"
            
          >
            <div class="img">
              <img :src="item.s_goods_photos[0].path" alt=""  v-lazy="item.s_goods_photos[0].path"/>
            </div>
            <div class="text">
              <h4>{{ item.name }}</h4>
              <p v-show="item.sale_price&&item.price">
                惊爆价￥{{ item.sale_price }} <span style=" text-decoration: line-through;">￥{{ item.price }}</span>
              </p>
              <p v-show="!item.sale_price" style="font-size: 2.5vw;color: #444141;">￥{{ item.price }}</p>
              <h5>
                {{ item.assessNum }}0条+评价
                <span> 好评率{{ item.assess }}%</span>
              </h5>
            </div>
          </li>
          </lazy-component>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  //做数据缓存就要给该页面起名
    name:"classify"
}

</script>
<script setup>
import { ref, reactive } from "vue";

import { useRoute, useRouter } from "vue-router";
import { mapMutations, mapState, mapActions, useStore } from "vuex";
const store = useStore();
const route = useRoute();
const router = useRouter();
const list = ref("");
const index = ref("");
const active = ref(0);
const showList=ref('')
const onNavchange = (index) => {
   document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    // window.pageYOffset = 0
  showList.value=list.value[index].s_goods
  random()
};
const getLocaldata = () => {
  list.value = store.state.classify.classifyList;
 

  active.value = route.params.index;
   showList.value=list.value[active.value].s_goods
   random()
};
const leftJump = () => {
  store.commit("changeRouterType", "back");
  router.go(-1);
};
const rightJump = () => {
  router.push("/search");
};
const jumpToGoods=async(id)=>{
  
  router.push(`/goodsDetail/${id}`)
  
}
//添加随机好评率和评价
const random=()=>{
  let res;
  for (let index = 0; index < showList.value.length; index++) {
  for (let j = 0; j < 100; j++) {
      res = Math.random() * 100 + 1;
      if (res >= 80) {
        showList.value[index].assess = Math.floor(res);
        
        break;
      }
    }
    showList.value[index].assessNum = Math.floor(Math.random() * 10 + 1);
  }
}
getLocaldata();
</script>

<style lang="scss" scoped>
.classify{
  width: 100%;
  height: 100vh;
  background-color: white;
  .topNav {
  --van-nav-bar-arrow-size: 18px;
  --van-nav-bar-icon-color: black;
  --van-nav-bar-text-color: black;
}
.content {
  display: flex;
}
.goodslist{
  width: 100%;
  background-color: white;

ul {
  margin-top: 2vh;
  background-color: white;
  li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2vh;
    background-color: white;
    .img {
      width: 30vw;
      //   height: 20vw;
      margin-right: 1vw;
      img {
        width: 100%;
        display: block;
        height: auto;
      }
    }
    .text {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      border-bottom: 1px solid #f5f5f5;
      
      h4,
      p {
        margin: 0;
      }
      h4 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 3.36vw;
        font-weight: normal;
        word-break: break-all;
        
      }
      p {
        color: red;
        font-size: 3.5vw;
        margin: 3vh 0;
        span {
          font-size: 2.5vw;
         
          color: #444141;
        }
      }
      h5 {
        margin: 0;
        font-weight: normal;
        color: #999;
        margin-bottom: 1vh;
        span {
          margin-left: 3vw;
        }
      }
    }
  }
}
}
}

</style>
